<template>
  <a-modal wrap-class-name="primary-modal" width="888px" title="Change Organization" @cancel="handleOrCancel">
    <a-form ref="orFormRef" layout="vertical" :model="orFormState">
      <a-form-item name="type">
        <div class="select-area">
          <a-radio-group v-model:value="pType" style="display: flex; width: 100%">
            <div class="radio-group" @click="getOrganization">
              <a-radio :value="1">Select Existing Organzation</a-radio>
            </div>
            <div class="radio-group">
              <a-radio :value="2">Create New Organization</a-radio>
            </div>
          </a-radio-group>
        </div>
      </a-form-item>
      <a-form-item ref="newOrName" label="Organization Name" name="newOrName">
        <a-select
          v-if="pType === 1"
          v-model:value="orFormState.newOrganization"
          show-search
          option-filter-prop="label"
          option-label-prop="label"
          placeholder="search and choose new organization">
          <a-select-option v-for="item in organizationList" :key="item.value" :label="item.text">
            {{ item.text }}
          </a-select-option>
        </a-select>
        <a-input
          v-if="pType === 2"
          v-model:value="orFormState.newOrganizationName"
          placeholder="please input organization name"
          autocomplete="off" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleOrCancel">Cancel</a-button>
      <a-button key="submit" type="primary" @click="saveOrName">Save</a-button>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, reactive, inject, watch } from 'vue'
import others from '@/api/others'
import { EDIT_SUCCEEDED, SAVED_SUCCESSFULLY } from '@/constants/message'

const props = defineProps({
  clientId: Number,
  type: Number
})
const emits = defineEmits(['cancel', 'getList'])

const { message } = inject('Feedback')
const pType = ref()
const clientId = ref()
const orFormState = reactive({
  newOrganization: undefined,
  newOrganizationName: ''
})
const organizationList = ref([])

/**
 * 获取组织列表
 */
const getOrganization = () => {
  others
    .getOrganizationByClientId({
      clientOrgID: clientId.value
    })
    .then(res => {
      if (res.code === 2000) {
        organizationList.value = res.data
      }
    })
}
/**
 * 取消模态框
 */
const handleOrCancel = () => {
  orFormState.newOrganization = undefined
  orFormState.newOrganizationName = ''
  emits('cancel')
}
/**
 * 保存组织修改
 */
const saveOrName = () => {
  if (pType.value === 1) {
    others
      .updateOrganizationById({
        clientOrgID: clientId.value,
        organizationID: orFormState.newOrganization
      })
      .then(res => {
        if (res.code === 2000 && res.data) {
          successFun()
        }
      })
  } else if (pType.value === 2) {
    others
      .createOrganization({
        clientOrgID: clientId.value,
        organizationName: orFormState.newOrganizationName.trim()
      })
      .then(res => {
        if (res.code === 2000 && res.data) {
          successFun()
        }
      })
  }
}
/**
 * 成功回调
 */
const successFun = () => {
  emits('getList')
  handleOrCancel()
  getOrganization()
  message.success(SAVED_SUCCESSFULLY)
}

watch(
  () => props.clientId,
  val => {
    clientId.value = val
    getOrganization()
  },
  { deep: true }
)
watch(
  () => props.type,
  val => {
    pType.value = val
  },
  { deep: true }
)
</script>

<style scoped lang="less">
.select-area {
  width: 480px;
  height: 32px;
  border: 1px solid @border-color;
  display: flex;
  border-radius: 2px;
  .radio-group {
    flex: 1;
    display: flex;
    padding-left: 12px;
    cursor: pointer;
    &:first-child {
      border-right: 1px solid @border-color;
    }
  }
}
</style>
